<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // hash路由
        class Route {
            constructor() {
                // 路由存储对象
                this.routes = {}
                // 当前hash
                this.currentHash = ''
                // 绑定this，避免监听时this指向改变
                this.freshRoute = this.freshRoute.bind(this)
                // 监听
                window.addEventListener('load', this.freshRoute, false)
                window.addEventListener('hashchange', this.freshRoute, false)
            }
            // 存储
            storeRoute(path, cb) {
                this.routes[path] = cb || function () { }
            }
            // 更新
            freshRoute() {
                this.currentHash = location.hash.slice(1) || '/'
                this.routes[this.currentHash]()
            }
        }

    </script>
</body>

</html>